<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyPetStore</title>
<!--    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <link rel="stylesheet" href="../css/main.css"/>
    <noscript>
        <link rel="stylesheet" href="../css/noscript.css"/>
    </noscript>
</head>
<body class="is-preload">
<div id="wrapper">
    <div th:replace="common/top">

    </div>
    <section id="banner" class="style2">
        <div class="inner">
							<span class="image">
								<img src="../images/pic07.jpg" alt=""/>
							</span>
            <header class="major">
                <h1 th:text="${product.name}">Product的name属性</h1>
                <a th:href="@{/catalog/viewCategory(categoryId=${product.categoryId})}" th:text="'Return to '+ ${product.categoryId}">Return to ${sessionScope.product.categoryId}</a>
            </header>
            <!--                <div class="content">-->
            <!--                    <p>Lorem ipsum dolor sit amet nullam consequat<br />-->
            <!--                        sed veroeros. tempus adipiscing nulla.</p>-->
            <!--                </div>-->
        </div>
    </section>

    <div id="main">

        <section id="two" class="spotlights">
            <section th:each="item:${itemList}">
                <a th:href="@{/catalog/viewItem(itemId=${item.itemId})}" class="image">
                    <img th:src="${product.description}" alt="" data-position="center center"/>
                </a>
                <div class="content">
                    <div class="inner">
                        <header class="major">
                            <h3 th:text="${item.itemId}">itemId</h3>
                        </header>
                        <p th:text="${item.product.productId}">productId</p>
                        <p th:text="${item.attribute1}"></p>
                        <p th:text="'$'+${#numbers.formatDecimal(item.listPrice,1,'COMMA',2,'POINT')}"></p>
                        <ul class="actions">
                            <li><a th:href="@{/cart/addItemToCart(workingItemId=${item.getItemId()})}" class="button">Add to Cart</a></li>
                        </ul>
                    </div>
                </div>
            </section>

            <!--            <h2 th:text="${category.name}"></h2>-->

            <!--            <table>-->
            <!--                <tr>-->
            <!--                    <th>Product ID</th>-->
            <!--                    <th>Name</th>-->
            <!--                </tr>-->
            <!--                <tr th:each="product:${productList}">-->
            <!--                    <td th:text="${product.productId}">productId</td>-->
            <!--                    <td th:text="${product.name}">Product Name</td>-->

            <!--                </tr>-->
            <!--                <c:forEach var="product" items="${sessionScope.productList}">-->
            <!--                    <tr>-->
            <!--                        <td>-->
            <!--                            <a href="viewProduct?productId=${product.productId}">${product.productId}</a>-->
            <!--                        </td>-->
            <!--                        <td>${product.name}</td>-->
            <!--                    </tr>-->
            <!--                </c:forEach>-->
            <!--            </table>-->

        </section>
    </div>
    <div th:replace="common/bottom">

    </div>
</div>
</body>
</html>